<template>
  <div :id="elId" :ref="elId" style="width:100%;height:100%"></div>
</template>
<script>
import { v4 } from 'uuid'
import 'echarts-liquidfill'

export default {
  name:'MyECharts',
  data() {
    return{
      myChart: null,
      elId: 'myEchart',
      
    }
  },
  props: {
    option: {
      type: Object,
      default:()=>{
        return {}
      }
    },
    delay: {//延时画图时间毫秒
      type: Number,
      default:0
    },
    isonclick: {
      type: Boolean,
      default:false
    }
  },
  computed:{
    isCollapse(){
      return this.$store.getters.sidebar.opened
    }
  },
  watch:{
    isCollapse(){
      let timer = setTimeout(()=>{
        this.myChart.resize();
        clearTimeout(timer)
      },200)
    },
    option:{
      handler(){
        this.loadEChart()
      },
      deep: true,
      // immediate:true, //初始化触发
    }
  },
  created() {
    this.elId = v4() // 避免key重复
  },  
  mounted() {
    if (!this.myChart) {
      setTimeout(() => {
        this.loadEChart()
      }, this.delay);
    }
  },  
  methods: {
    loadEChart() {
        
      if (this.myChart){
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(this.$refs[this.elId]);
      this.myChart.setOption(this.option);


      if (this.isonclick) {
        this.myChart.on('click',  (params) =>{
          this.$emit('click',params)
        });
      }

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },

    /**
     * 高亮某一个数据
     * @name {String} 高亮的数据的name
     * @length {Number} 所有name Array的长度
     * @seriesIndex {Number} 数据的seriesIndex 默认0
     * @isShowTip {boolean} 是否显示tooltip默认true
    */
    highlightOne(name,length,seriesIndex=0,isShowTip=true){

      // 取消之前高亮的图形
      for (let index = 0; index <= length; index++) {
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: seriesIndex,
          dataIndex: index,
        });
      }

      // 执行高亮
      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: seriesIndex,
        name: name,
      });
      // 执行显示tip
      if (isShowTip) {
        this.myChart.dispatchAction({
          type: "showTip",
          seriesIndex: seriesIndex,
          name: name,
          // position:'top'
          position: function(point, params, dom, rect, size) {
            params, dom, rect
              // 提示框位置
              var x = 0; // x坐标位置
              var y = 0; // y坐标位置

              // 当前鼠标位置
              var pointX = point[0];
              var pointY = point[1];

              // 提示框大小
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];

              // boxWidth > pointX 说明鼠标左边放不下提示框
              if (boxWidth > pointX) {
                x = 5;
              } else {
                // 左边放的下
                x = pointX - boxWidth;
              }

              // boxHeight > pointY 说明鼠标上边放不下提示框
              if (boxHeight > pointY) {
                y = 5;
              } else {
                // 上边放得下
                y = pointY - boxHeight;
              }

              return [x, y];
            }
        });
      }
      


    },
    /**
     * 取消之前高亮的图形
     * @length {Number} 所有name Array的长度
     * @seriesIndex {Number} 数据的seriesIndex 默认0
    */    
    downplay(length,seriesIndex=0){
      for (let index = 0; index <= length; index++) {
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: seriesIndex,
          dataIndex: index,
        });
      }
    },

  },
  destroyed (){
    window.removeEventListener('resize', () => {
      this.myChart.resize();
    })
    if(this.myChart){
      this.myChart.dispose()
    } 
  }
}
</script>
